import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Platform,
  StyleSheet,
} from 'react-native';

import FullStoreName from './FullStoreName';
import StoreAddress from './StoreAddress';
import CarsDiscount from '../../containers/carsDiscountContainer';

import PxToDp from '../../utils/PxToDp';
import NavCon from '../Public/NavCon';

export default class FoursStore extends Component {

  _changeStoreName(storeName) {
    const { dispatch } = this.props;
    this.props.navigator.push({
      component: FullStoreName,
      passProps: { storeName, dispatch },
    });
  }

  _changeStoreAddress(storeAddress) {
    const { dispatch } = this.props;
    this.props.navigator.push({
      component: StoreAddress,
      passProps: { storeAddress, dispatch },
    });
  }

  _changeCarsDiscount() {
    const { dispatch } = this.props;

    this.props.navigator.push({
      component: CarsDiscount,
      passProps: { dispatch },
    });
  }

  _back() {
    const { storeInfo, store } = this.props;
    const storeName = store || storeInfo.rv.dealer.name;
    this.props.getStore(storeName);
    this.props.navigator.pop();
  }

  render() {
    const { storeInfo, store, cAddress } = this.props;
    const storeName = store || storeInfo.rv.dealer.name;
    const storeAddress = cAddress || storeInfo.rv.dealer.address;

    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon
          currentTitle="所在4S店"
          bgColor="#fff"
          onPress={() => this._back()}
        />
        <View style={[styles.row, styles.wrapper, styles.avatarWrapper]}>
          <Text style={[styles.title]}>店铺头像</Text>
          <Image style={[styles.avatar]} source={require('../../img/logobj.png')} />
        </View>
        <View style={[styles.wrapper, styles.listWrapper]}>
          { storeInfo.rv ?
            <View>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.row, styles.list]}
                onPress={() => this._changeStoreName(storeInfo.rv.dealer.name)}
              >
                <Text style={[styles.title]}>店名全称</Text>
                <View style={[styles.row, styles.end]}>
                  <Text style={[styles.name]}>{storeName}</Text>
                  <Image style={[styles.next]} source={require('../../img/next.png')} />
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.6}
                style={[styles.row, styles.list]}
                onPress={() => this._changeStoreAddress(storeInfo.rv.dealer.address)}
              >
                <Text style={[styles.title]}>店铺地址</Text>
                <View style={[styles.row, styles.end]}>
                  <Text style={[styles.name]}>{storeAddress}</Text>
                  <Image style={[styles.next]} source={require('../../img/next.png')} />
                </View>
              </TouchableOpacity>
            </View> : null
         }
          <TouchableOpacity
            activeOpacity={0.6}
            style={[styles.row, styles.list]}
            onPress={() => this._changeCarsDiscount()}
          >
            <Text style={[styles.title]}>车系优惠</Text>
            <View style={[styles.row, styles.end]}>
              <Image style={[styles.next]} source={require('../../img/next.png')} />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#f7f8fa',
  },
  end: {
    justifyContent: 'flex-end',
  },
  wrapper: {
    width: '100%',
    marginTop: PxToDp(24),
    backgroundColor: '#fff',
  },
  avatarWrapper: {
    justifyContent: 'space-between',
    alignItems: 'center',
    height: PxToDp(80),
  },
  listWrapper: {
  },
  title: {
    marginLeft: PxToDp(20),
    color: '#333',
    fontSize: PxToDp(16),
  },
  avatar: {
    width: PxToDp(56),
    height: PxToDp(56),
    marginRight: PxToDp(40),
  },
  list: {
    justifyContent: 'space-between',
    alignItems: 'center',
    height: PxToDp(44),
    paddingRight: PxToDp(20),
    borderColor: '#f3f3f3',
    borderBottomWidth: PxToDp(1),
  },
  name: {
    color: '#999',
    fontSize: PxToDp(14),
  },
  next: {
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? PxToDp(20) : 0,
  },
});
